
<template>
  <div class="container">
    <div id="map"></div>
  </div>
</template>
      
<script>
import "mapbox-gl/dist/mapbox-gl.css";
import mapboxgl from "mapbox-gl"; // or "const mapboxgl = require('mapbox-gl');"
export default {
  name: "Vue2MapboxMapTemplate",
  data() {
    return {};
  },

  mounted() {
    this.initMap();
  },

  methods: {
    initMap() {
      mapboxgl.accessToken =
        "pk.eyJ1IjoiY3Vpaml5aW5nIiwiYSI6ImNsZ3QyZjY4ODAxbDEza3BkOTJqbTJvN3gifQ.Ldj9qAFzb5uzcLP-VtFB3A";
      const map = new mapboxgl.Map({
        container: "map", 
        style: "mapbox://styles/cuijiying/cll09l2nz007w01picbmj3e1z", 
        center: [118.79013542048335, 32.05775855185749], 
        zoom: 2, 
        projection: "mercator",
      });

      //
      map.on("click", function (e) {
        var features = map.queryRenderedFeatures(e.point);
        // 处理获取到的要素
        if (features.length > 0) {
          // 可以根据需要执行特定操作，如打印属性信息等
          console.log(features[0].properties);
        }
      });

      map.on("load", () => {
      // // 使用symbol图层的image方式加载点图层
        map.addSource("earthquakes", {
          type: "geojson",
          data: "https://docs.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson",
        });

        map.addLayer({
          id: "earthquakes-layer-symbol",
          type: "symbol",
          source: "earthquakes",
          layout: {
            'text-field': '{mag}',
            // 'icon-allow-overlap': false,
            // 'text-allow-overlap': false,
            "text-size": 30
          },
          paint: {
 
          }
        });

        map.addLayer({
          id: "earthquakes-layer",
          type: "circle",
          source: "earthquakes",
          layout: {
            // 'text-field': '{mag}'
          },
          paint: {
            // 'circle-color': '#11b4da',
            'circle-color': [
              'case',
              ["all", [">=", ["get", "mag"], 0], ["<", ["get", "mag"], 2]],
              '#ff0000',
              ["all", [">=", ["get", "mag"], 2], ["<", ["get", "mag"], 4]],
              '#00ff00',
              '#000000',
            ],
            'circle-radius': 4,
            // 'circle-stroke-width': 1,
            // 'circle-stroke-color': '#fff'
          }
        });



      // // 使用symbol图层的image方式加载点图层
      //   // 创建 Canvas 元素
      //   var canvas = document.createElement("canvas");
      //   canvas.width = 8; // 设置 Canvas 宽度
      //   canvas.height = 8; // 设置 Canvas 高度
      //   // 获取绘图上下文
      //   var ctx = canvas.getContext("2d");
      //   ctx.beginPath();
      //   var x = 4;
      //   var y = 4;
      //   var radius = 4;
      //   var startAngle = 0;
      //   var endAngle = 2 * Math.PI;
      //   var anticlockwise = false;
      //   ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
      //   ctx.fillStyle = "red";
      //   ctx.fill();

      // //  // 将ImageData对象的data属性转换为Uint8Array
      // //  let uintArray = new Uint8Array(ctx.getImageData(0,0,40, 40).data);
      // //  console.log(ctx.getImageData(0,0,40, 40))
      // //  console.log(uintArray)

      //   let dataURI = canvas.toDataURL();

      //   map.loadImage(
      //     dataURI,
      //     function (error, image) {
      //       if (error) throw error;
      //       map.addImage("circle-icon", image);
      //     }
      //   );
      //   map.addSource("earthquakes", {
      //     type: "geojson",
      //     data: "https://docs.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson",
      //   });
      //   map.addLayer({
      //     id: "earthquakes-layer",
      //     type: "symbol",
      //     source: "earthquakes",
      //     layout: {
      //       "icon-image": "circle-icon",
      //       "icon-size": 1.0,
      //       // "icon-allow-overlap": true,
      //     },
      //   });




      

      });
    },
  },
};
</script>
      
<style></style>
      